<template>
	<view class="return">
		<!-- 关键词搜索 -->
		<view class="return-top">
			<u-input class="return-top-input" v-model="param.keywords"></u-input>
			<u-button color="#1b5bc5" icon="search" icon-color="#fff" @click="query">查询</u-button>
		</view>
		<!-- tabs -->
		<view class="return-tabs" v-if="this.funtype === 'myfix' ">
			<u-button class="tabs-button" @click="query('click','')"
				:color="param.status_text==''?'#1b5bc5':''">全部</u-button>
			<u-button class="tabs-button" @click="query('click',1)"
				:color="param.status_text==1?'#1b5bc5':''">未派单</u-button>
			<u-button class="tabs-button" @click="query('click',2)"
				:color="param.status_text==2?'#1b5bc5':''">未完成</u-button>
			<u-button class="tabs-button" @click="query('click',3)"
				:color="param.status_text==3?'#1b5bc5':''">已完成</u-button>
		</view>
		<!-- tips -->
		<view class="return-tips">
			<view class="tips-item" v-for="item in countList" :key="item.label" :style="item.style">
				<text class="label">{{item.label}}:</text>
				<text class="content">{{item.value}}</text>
			</view>

		</view>
		<list ref="list" @getCount="getCount" :funtype="funtype" :param="param"></list>
	</view>
</template>
<script>
	import list from './components/list.vue'
	import {
		orderGetCountFuntype,
	} from '@/api'
	export default {
		components: {
			list
		},
		onLoad(e) {
			this.funtype = e.funtype ?? 'myfix'
			uni.setNavigationBarTitle({
				title: this.funtype === 'myfix' ? '我的送返单' : '送返修'
			})
		},
		data() {
			return {
				funtype: '',
				param: {
					keywords: '',
					status_text: '',
				},
				countList: []
			}
		},
		methods: {
			async query(type, value) {
				if (type === 'click') this.param.status_text = value
				await this.$nextTick()
				this.$refs.list.init()
			},
			async getCount() {
				let {
					code,
					data: countList
				} = await orderGetCountFuntype({
					funtype: this.funtype === 'myfix' ? 'getWorkerRealorderSelect' : 'getWorkerOrderSelect'
				})
				if (code === 1) {
					this.$refs.list.getHeight()
					this.countList = countList
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.return {
		padding: 40rpx 20rpx 0 20rpx;

		.return-top-input {
			margin-bottom: 20rpx !important
		}

		.return-tabs {
			display: flex;
			justify-content: center;
			align-items: center;

			.tabs-button {
				width: 100%;
				margin-top: 20rpx
			}
		}

		.return-tips {
			display: flex;
			font-size: 14px;
			justify-content: space-around;
			text-align: center;
			padding: 20rpx 0;

			.tips-item {
				width: 50%;

				.content {
					color: #f00;
				}
			}
		}
	}
</style>